<template>
	<view class="clock-container">
		<map width="750rpx" name="" :markers="markers" :latitude="params1['定位维度']" :longitude="params1['定位经度']"></map>
		<view class="circle" @click="getLocation">
			<view>定位打卡</view>
			<view class="patrol-time">{{time}}</view>
		</view>
		<view v-if="inRange === 1" class="right">定位成功,当前在巡逻点位200米内</view>
		<view v-if="inRange === 2" class="wrong">距离巡逻点超过200米，需要填写原因</view>
		<view v-if="inRange === 2" style="padding: 20rpx;">
			<view class="title"><text style="color: red;">*</text>原因描述</view>
			<textarea style="height: 320rpx;" :maxlength="500" class="content" v-model="params1['超出距离原因']"
				placeholder="请填写超出距离原因..." name="" id="" cols="30" rows="10"></textarea>
		</view>
		<view v-if="inRange !== 2" style="height: 200rpx;"></view>
		<button class="btn" @click="goNext">下一步</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				pointInfo: {},
				markers: [],
				params: {
					id: null
				},
				params1: {
					id: null,
					是否超出距离: null,
					超出距离原因: '',
					定位距离: null,
					定位经度: null,
					定位维度: null,
				},
				timeId: '',
				time: null,
				inRange: ''
			}
		},
		onLoad(options) {
			// console.log('item', JSON.parse(options.item))
			this.item = JSON.parse(options.item)
			this.params.id = +JSON.parse(options.item).巡逻点id
			this.params1.id = +JSON.parse(options.item).id
			// this.params1 = +JSON.parse(options.item)
			if(options.type == 'facility') {
				this.getPointInfo('taskSystem/device/info')
			}else {
				this.getPointInfo('taskSystem/patrolPoint/info')
			}
			this.getCurrentTime()
			this.timeId = setInterval(() => {
				this.getCurrentTime()
			}, 1000)
		},
		onHide() {
			clearInterval(this.timeId)
		},
		methods: {
			goNext() {
				if (!this.inRange) {
					uni.showToast({
						title: '请先完成巡逻打卡',
						icon: 'none'
					})
				} else if (this.inRange == 2 && this.params1.超出距离原因.trim() == '') {
					uni.showToast({
						title: '请填写超出距离原因',
						icon: 'none'
					})
				} else {
					let newItem = Object.assign({}, this.item, this.params1)
					uni.navigateTo({
						url: '/taskSystem/completePatrol/completePatrol?item=' + JSON.stringify(newItem)
					})
				}

			},
			getPointInfo(url) {
				uni.showLoading({
					mask: true
				})
				this.$http.post(url, this.params).then(res => {
					if (res.code === 10000) {
						console.log(res)
						this.pointInfo = res.data
						this.params1.经度 = res.data.经度
						this.params1.维度 = res.data.维度
						this.params1.定位经度 = res.data.经度
						this.params1.定位维度 = res.data.维度
						this.markers[0] = {longitude: res.data.经度, latitude: res.data.维度, callout: {content: '打卡点位', display: 'ALWAYS'},iconPath: '../../static/location.png', width: 40, height: 40}
					}
				})
			},
			getCurrentTime() {
				let time = new Date()
				let h = time.getHours() < 10 ? '0' + time.getHours() : time.getHours()
				let m = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()
				let s = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
				this.time = `${h}:${m}:${s}`
			},
			getLocation() {
				uni.showLoading()
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						uni.showToast({
							title: '定位成功'
						})
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						const distance = this.getDistance(res.latitude, res.longitude, this.pointInfo.维度, this
							.pointInfo.经度)
						this.params1.定位距离 = distance * 1000
						this.params1.定位经度 = res.longitude
						this.params1.定位维度 = res.latitude
						this.markers[1] = {longitude: res.longitude, latitude: res.latitude, callout: {content: '我的位置', display: 'ALWAYS'},iconPath: '../../static/location.png', width: 40, height: 40}
						if (distance <= 0.2) {
							this.inRange = 1
							this.params1.是否超出距离 = 0
						} else {
							this.inRange = 2
							this.params1.是否超出距离 = 1
						}
					},
					fail: (res) => {
						uni.hideLoading()
						uni.showToast({
							title: '操作频繁,请稍后再试',
							icon: 'none'
						})
						console.log(res)
					}
				});
				uni.hideLoading()
			},
			Rad(d) { //根据经纬度判断距离
				return d * Math.PI / 180.0;
			},
			getDistance(lat1, lng1, lat2, lng2) {
				// lat1用户的纬度
				// lng1用户的经度
				// lat2巡逻点的纬度
				// lng2巡逻点的经度
				var radLat1 = this.Rad(lat1);
				var radLat2 = this.Rad(lat2);
				var a = radLat1 - radLat2;
				var b = this.Rad(lng1) - this.Rad(lng2);
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) *
					Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				s = s.toFixed(2)
				// s = s.toFixed(2) + '公里' //保留两位小数
				console.log('经纬度计算的距离:' + s)
				return s
			},
		}
	}
</script>

<style lang="scss" scoped>
	.clock-container {
		padding-bottom: 100rpx;
	}
	map {
		width: 750rpx;
		height: 400rpx;
	}
	.title {
		margin-bottom: 20rpx;
	}

	.content {
		width: 710rpx;
		padding: 20rpx;
		border: 2rpx solid #ccc;
	}

	.right {
		color: #1AC472;
		text-align: center;
	}

	.wrong {
		color: red;
		text-align: center;
	}

	.btn {
		margin-top: 60rpx;
		width: 568rpx;
		height: 80rpx;
		// position: fixed;
		bottom: 0;
		line-height: 80rpx;
		margin-left: 80rpx;
		// margin-top: 160rpx;
		background: linear-gradient(to right, #3350D9, #1152FC);
		// background-color: #1152FC;
		color: #fff;
	}

	.circle {
		width: 220rpx;
		height: 220rpx;
		// margin-left: 265rpx;
		background-color: #1152FC;
		border-radius: 50%;
		color: #fff;
		text-align: center;
		padding-top: 70rpx;
		margin: 120rpx 265rpx 60rpx 265rpx;

		// line-height: 200rpx;
		.patrol-time {
			font-size: 28rpx;
			margin-top: 10rpx;
		}
	}
</style>
